<jsp:include page="include-header.jsp" />

<script type="text/javascript" src="js/jquery.menu.js"></script>
<!--  For contact list accordion menu -->
<script type="text/javascript" src="js/jquery.uitablefilter.js"></script>
<script src="js/jquery.toChecklist.js" type="text/javascript"></script>

<!--  For contact list filter table -->

<script type="text/javascript">
	$(function() {

		var theTable = $('table.food_planner');

		theTable.find("tbody > tr").find("td:eq(1)").mousedown(function() {
			$(this).prev().find(":checkbox").click();
		});

		$("#filter").keyup(function() {
			$.uiTableFilter(theTable, this.value);
		});

		$('#filter-form').submit(function() {
			theTable.find("tbody > tr:visible > td:eq(1)").mousedown();
			return false;
		}).focus();

		$('#mySelectBoxContact').toChecklist({
			addSearchBox : true,
			showSelectedItems : true
		});
	});
</script>


<!-- for editable and tags functions (start) -->
<link rel="stylesheet" href="css/superbly-tagfield.css" />
<script type="text/javascript" src="js/superbly-tagfield.js"></script>
<script type="text/javascript" src="js/jquery.jeditable.js"></script>

<script type="text/javascript">
	$(function() {

		//for editable function (text)

		$(".click").editable(
				"http://www.appelsiini.net/projects/jeditable/php/echo.php", {
					indicator : "<img src='images/indicator.gif'>",
					tooltip : "Click to edit...",
					style : "inherit"
				});

		//for editable function (dropdown)
		$(".editable_select_country").editable(
				"http://www.appelsiini.net/projects/jeditable/php/save.php", {
					indicator : '<img src="images/indicator.gif">',
					data : "{'1':'United States','2':'Singapore'}",
					type : "select",
					submit : "OK",
					style : "inherit",
					submitdata : function() {
						return {
							id : 2
						};
					}
				});
		$(".editable_select_gender").editable(
				"http://www.appelsiini.net/projects/jeditable/php/save.php", {
					indicator : '<img src="images/indicator.gif">',
					data : "{'1':'Male','2':'Female'}",
					type : "select",
					submit : "OK",
					style : "inherit",
					submitdata : function() {
						return {
							id : 2
						};
					}
				});

		$(".editable_select_language").editable(
				"http://www.appelsiini.net/projects/jeditable/php/save.php", {
					indicator : '<img src="images/indicator.gif">',
					data : "{'1':'English','2':'French'}",
					type : "select",
					submit : "OK",
					style : "inherit",
					submitdata : function() {
						return {
							id : 2
						};
					}
				});

		$(".editable_select_state").editable(
				"http://www.appelsiini.net/projects/jeditable/php/save.php", {
					indicator : '<img src="images/indicator.gif">',
					data : "{'1':'PA','2':'CA'}",
					type : "select",
					submit : "OK",
					style : "inherit",
					submitdata : function() {
						return {
							id : 2
						};
					}
				});
		//for adding and deleting of multiple products and customized tags values
		//products tags does not allow new values
		//customized tags allow new values
		var productsTags = [ 'Annex Shoe S200', 'DX Uncrushable C100', 'Garmin Forerunner 405 Shoe', 'Gibson Matrix',
				'Mr. Gadget Executive Heel', 'Pinky Malika','Turtle TW-800 Sports Shoe'];
		var customizedTags = [ 'Friendly', 'Fierce', 'Happy', 'Joyful', 'Influential' ];

		// Initialize Demo 2
		$("#products").superblyTagField({
			allowNewTags : false,
			showTagsNumber : 10,
			preset : [ 'Annex Shoe S200', 'Garmin Forerunner 405 Shoe' ],
			tags : productsTags
		});

		$("#customized").superblyTagField({
			allowNewTags : true,
			showTagsNumber : 10,
			preset : [ 'Influential' ],
			tags : customizedTags
		});

	});
</script>
<!-- for editable and tags functions (end) -->

<div id="content" class="full_column clearfix">
<div id="content_header">Network Contacts<a href="contacts-add.do"
	class="awesome green medium">+ Add Contact</a></div>
	
<div id="content_padded">

	<div id="left_inner" style="width:180px; margin-right:20px; float:left;">
	<h4>Address Book</h4>
	<ul id="menu">
	<li><a href="#">All</a></li>
	<li><a href="#">Company</a>
	<ul>
		<li><a href="#">Amberson Tech (4)</a></li>
		<li><a href="#">Hutchinson Nova (1)</a></li>
		<li><a href="#">Innova Inc. (3)</a></li>
		<li><a href="#">MacroWat Inc. (2)</a></li>
		<li><a href="#">PCN Max (1)</a></li>
		<li><a href="#">Tenwest Inc. (2)</a></li>

	</ul>
	</li>
	<li><a href="#">Product</a>
	<ul>
		<li><a href="#">Annex Shoe S200 (5)</a></li>
		<li><a href="#">DX Uncrushable C100 (2)</a></li>
		<li><a href="#">Garmin Forerunner 405 Shoe (2)</a></li>
		<li><a href="#">Gibson Matrix (8)</a></li>
		<li><a href="#">Mr. Gadget Executive Heel (4)</a></li>
		<li><a href="#">Pinky Malika  (2)</a></li>
		<li><a href="#">Turtle TW-800 Sports Shoe  (3)</a></li>
	</ul>
	</li>
	<li><a href="#">Customized</a>
	<ul>
		<li><a href="#">Influential(3)</a></li>
		<li><a href="#">Difficult (2)</a></li>
	</ul>
	</li>
</ul>
	</div>
	<div id="right_inner" style="width:270px; margin-right:20px; float:left;">
	<h4>> Filter</h4>
	<div id="myList-menu" class="lm-wrapper">
	<select id="mySelectBoxContact" multiple="multiple">
	<option value="option_1">Eric Lin: Tenwest Inc., Purchasing Director</option>
	<option value="option_1">Li Du: Tenwest Inc., Purchasing Manager</option>
	<option value="option_2">Alice Braga: Hutchinson Nova, Purchaser</option>
	<option value="option_3">Hae Jeong: Watson Inc., Purchaser</option>
	<option value="option_4">Jennifer Gates: MacroWat Inc., Purchasing Manager	
	Lead</option>
	<option value="option_2">John Kani: PCN WatchMax, Purchaser
	Manager</option>
	<option value="option_3">Li Huang: Innova Inc., Purchasing Director</option>
	<option value="option_4">Malika Gopal: Amberson WatchTech, Purchaser</option>
	<option value="option_2">Yong Kim: Watson Inc., Purchasing Manager</option>
	</select>
</div>
	</div>
	
	<div id="right_inner_inner" style="width:680px; float:left;">
	<div id="message_feed_header">
		Contact Details <a href="#">Show Conversation History</a>
	</div>

	<div id="profileInfo">
		<div id="profile_image">
			<img src="thumbs/adamhenry-big.JPG" height="100" width="80" alt="Adam Henry" />
		</div>
		<div id="profile_info_text">
		<span style="font-size: 18px;"  class="click"> Eric</span><span style="font-size: 18px;" class="click"> Lin</span><br />
		<span style="font-size: 15px;" class="click"> Purchasing Director</span> at <span style="font-size: 15px"; class="click"> Ten West. Inc.</span><br />
		<span style="font-size: 15px;" class="click"> United States of America</span> <br/>
		<label>Email:</label><span class="click"> eric.lin@tenwest.bodado.info</span> |
		<label>Phone:</label><span class="click"> +1 412-234-2353</span><br />
		</div>
		<div id="tag_list">
			<label>Products Association: </label><input type="text" name="product_tags" id="products" />
			<label>Customized Tags: </label><input type="text" name="customized_tags" id="customized" />
		</div>
	</div>
	<br/>
	<div id="profileInfo_details">
		<div id="profile_info_text_left">
		<ul>
		 <li><label>Gender</label></li>
		 <li><label>Preferred Language</label></li>
		 <li><label>Street Address</label></li>
		 <li><label>Street Address 2</label></li>
		 <li><label>Postal</label></li>
		 <li><label>Country</label></li>
		 <li><label>City</label></li>
		 <li><label>State</label></li>
		</ul>
		</div>
		<div id="profile_info_text_right">
		<ul>
		 <li><span class="editable_select_gender" style="display: inline">M</span></li>
		 <li><span class="editable_select_language" style="display: inline">English</span></li>
		 <li><span class="click"> 5000 Forbes Avenue</span></li>
		 <li><span class="click">-</span></li>
		 <li><span class="click"> 15213</span></li>
		 <li><span class="editable_select_country" style="display: inline"> United States of America</span></li>
		 <li><span class="click"> Pittsburgh</span> </li>
		 <li><span class="editable_select_state" style="display: inline"> PA</span></li>
		</ul>
		</div>
	</div>

	</div>
<!-- end of full column div -->
</div>
</div>

<jsp:include page="include-footer.jsp" />


